import { CanvasKeyBoardEvent, CanvasMouseEvent } from "../ch3/Event";
import { Math2D } from "../ch3/Math2d";
import { TestApp, TextAlign, TextBaseline } from "../ch4/TestApp";
import { Tank } from "./Tank";

enum ELayout {
    LEFT_TOP,
    RIGHT_TOP,
    RIGHT_BOTTOM,
    LEFT_BOTTOM,

    CENTER_MIDDLE,

    CENTER_TOP,
    RIGHT_MIDDLE,
    CENTER_BOTTOM,
    LEFT_MIDDLE
}
class TestCh5 extends TestApp {
    // 鼠标位置
     _mouseX = 0;
     _mouseY = 0;

    constructor(canvas: HTMLCanvasElement) {
        super(canvas);
        this.isSupportMouseMove = true;

        // 创建一坦克
        this._tank = new Tank();
        this._tank.x = 0.5 * this.canvas.width
        this._tank.y = 0.5 * this.canvas.height

        // 缩放
        // this._tank.scaleX = 2;
        // this._tank.scaleY = 2;

        // this._tank.tankRotation = Math2D.toRadian(30)
        // this._tank.turretRotation = Math2D.toRadian(-30);
    }
    dispatchMouseMove(evt: CanvasMouseEvent) {
        this._mouseX = evt.canvasPosition.x;
        this._mouseY = evt.canvasPosition.y;

        this._tank.onMouseMove(evt);
    }
    dispatchKeypress(evt: CanvasKeyBoardEvent) {
        this._tank.onKeyPress(evt);
    }

    render() {
        if (this.context2D != null) {
            //清空画布
            this.context2D.clearRect(
                0, 0,
                this.canvas.width,
                this.canvas.height
            )
            //网格
            this.strokeGrid();
            //坐标系
            this.drawCanvasCoordCenter();

            // 平移 0度默认左上角
            // this.doTransform(0);
            // this.doTransform(20,false);
            // this.doTransform(-20,false)
            // this.doTransform(20);
            // this.doTransform(-20)
            // this.testFillLayout();
            // this.testFillUV();
            // this.rotationAndRevolutionSimulation();

            this.draw4Quadrant();
            this.drawTank();

            //打印坐标信息
            this.drawCoordInfo(
                `[${this._mouseX.toFixed(2)} , ${this._mouseY.toFixed(2)}]`,
                this._mouseX,
                this._mouseY
            )
        }
    }
    // 象限文字绘制
    draw4Quadrant() {
        if (this.context2D != null) {
            //
            this.context2D.save();
            let w = this.canvas.width;
            let h = this.canvas.height
            let c = "rgba(0,0,255,0.5)"

            this.fillText(
                "第一象限",
                w, h, c,
                "right", "bottom"
            )

            this.fillText(
                "第二象限",
                0, h, c,
                "left", "bottom"
            )
            this.fillText(
                "第三象限",
                0, 0, c,
                "left", "top"
            )

            this.fillText(
                "第四象限",
                w, 0, c,
                "right", "top"
            )
            this.context2D.restore()
        }
    }
    private _tank: Tank;
    drawTank() {
        this._tank.draw(this);
    }
    // 平移
    doTransform(
        degree: number,
        rotateFirst = true
    ) {
        //角度转弧度
        let radians = Math2D.toRadian(degree);

        if (this.context2D != null) {
            let width = 100;
            let height = 60;

            let x = 0.5 * this.canvas.width;
            let y = 0.5 * this.canvas.height;

            this.context2D.save();
            //缩放 缩放的整个坐标系 300*1.5 300*1.5
            // let s = 1.5; 
            // this.context2D.scale(s,s);

            if (rotateFirst) {
                this.context2D.rotate(radians)
                //平移坐标系到画布中心 
                this.context2D.translate(x, y)
            } else {
                //平移坐标系到画布中心 
                this.context2D.translate(x, y)
                this.context2D.rotate(radians)
            }

            //绘制矩形
            this.fillRectWithTitle(
                0, 0, width, height, "平移矩形"
            )
            this.context2D.restore();

            //计算半径
            let radius = this.distance(0, 0, x, y);
            this.strokeCircle(0, 0, radius, "black")
        }
    }

    fillRectWithTitle(
        x: number,
        y: number,
        width: number,
        height: number,
        text: string,
        color: string = "grey",
        align: TextAlign = "center",
        baseline: TextBaseline = "middle",
        showCoord: boolean = true,
        font: string = this.makeFontString()
    ) {
        if (this.context2D != null) {
            this.context2D.save();

            // 矩形绘制
            this.context2D.fillStyle = color;
            this.context2D.font = font;
            this.context2D.beginPath();
            this.context2D.rect(x, y, width, height)
            this.context2D.fill();

            //文本绘制
            if (text.length > 0) {
                let rectCenterX = 0.5 * width;
                let rectCenterY = 0.5 * height
                this.fillText(
                    text,
                    rectCenterX, rectCenterY,
                    "black",
                    align,
                    baseline
                )
            }
            //移动后的坐标系
            if (showCoord) {
                this.strokeCoord(x, y, width + 20, height + 20)
                //原点
                this.fillCircle(x, y, 2)
            }
            this.context2D.restore();
        }
    }

    testFillLayout() {
        if (this.context2D != null) {
            //
            this.rotateTranslate(0, ELayout.LEFT_TOP)
            this.rotateTranslate(10, ELayout.LEFT_MIDDLE)
            this.rotateTranslate(20, ELayout.LEFT_BOTTOM)

            this.rotateTranslate(30, ELayout.CENTER_TOP)
            this.rotateTranslate(40, ELayout.CENTER_MIDDLE)
            this.rotateTranslate(-10, ELayout.CENTER_BOTTOM)

            this.rotateTranslate(-20, ELayout.RIGHT_TOP)
            this.rotateTranslate(-30, ELayout.RIGHT_MIDDLE)
            this.rotateTranslate(-40, ELayout.RIGHT_BOTTOM)

            //计算半径
            let radius = this.distance(0, 0,
                this.canvas.width * 0.5,
                this.canvas.height * 0.5);
            this.strokeCircle(0, 0, radius, "black")
        }
    }
    // doTransform
    rotateTranslate(
        degree: number,
        layout = ELayout.LEFT_TOP,
        width = 40,
        height = 20
    ) {
        if (this.context2D != null) {
            let radians = Math2D.toRadian(degree);
            this.context2D.save();
            this.context2D.rotate(radians);
            this.context2D.translate(
                this.canvas.width * 0.5,
                this.canvas.height * 0.5
            )
            this.fillLocalRectWithTitle(
                width, height,
                layout,
                ''
            )
            this.context2D.restore()
        }
    }

    fillLocalRectWithTitle(
        // 矩形的宽和高
        width: number,
        height: number,
        // 旋转原点
        referencePt = ELayout.CENTER_MIDDLE,
        // 下面的是文本
        text: string,
        color: string = "grey",
        align: TextAlign = "center",
        baseline: TextBaseline = "middle",
        showCoord: boolean = true,
        font: string = this.makeFontString()
    ) {
        if (this.context2D != null) {
            // 计算x,y
            let x = 0;
            let y = 0;

            let centerX = 0.5 * width
            let centerY = 0.5 * height
            switch (referencePt) {
                case ELayout.LEFT_TOP:
                    x = 0;
                    y = 0;
                    break;
                case ELayout.LEFT_MIDDLE:
                    x = 0;
                    y = - centerY
                    break;
                case ELayout.LEFT_BOTTOM:
                    x = 0;
                    y = - height
                    break;
                case ELayout.CENTER_TOP:
                    x = - centerX;
                    y = 0
                    break;
                case ELayout.CENTER_MIDDLE:
                    x = - centerX
                    y = -centerY
                    break;
                case ELayout.CENTER_BOTTOM:
                    x = - centerX
                    y = - height
                    break;

                case ELayout.RIGHT_TOP:
                    x = -width
                    y = 0
                    break;
                case ELayout.RIGHT_MIDDLE:
                    x = - width
                    y = -centerY
                    break;
                case ELayout.RIGHT_BOTTOM:
                    x = -width
                    y = -height
                    break;
            }

            this.context2D.save();

            // 矩形绘制
            this.context2D.fillStyle = color;
            this.context2D.font = font;
            this.context2D.beginPath();
            this.context2D.rect(x, y, width, height)
            this.context2D.fill();

            //文本绘制
            if (text.length > 0) {
                let rectCenterX = 0.5 * width;
                let rectCenterY = 0.5 * height
                this.fillText(
                    text,
                    rectCenterX, rectCenterY,
                    "black",
                    align,
                    baseline
                )
            }
            //移动后的坐标系
            if (showCoord) {
                this.strokeCoord(0, 0, width + 20, height + 20)
                //原点
                this.fillCircle(0, 0, 2)
            }
            this.context2D.restore();
        }
    }

    testFillUV() {
        if (this.context2D != null) {
            let radius = 200;
            let steps = 18;

            //正方向
            for (let i = 0; i <= steps; i++) {
                let n = i / steps;

                this.translateRotateUVDrawRect(
                    i * 10,
                    n, 0.5,
                    radius
                )

                this.translateRotateUVDrawRect(
                    -i * 10,
                    0.5, n,
                    radius
                )
            }

        }
    }
    translateRotateUVDrawRect(
        degree: number,
        u = 0,
        v = 0,
        radius = 200,
        width = 40,
        height = 20
    ) {
        if (this.context2D != null) {
            let radians = Math2D.toRadian(degree);

            this.context2D.save();

            this.context2D.translate(
                0.5 * this.canvas.width,
                0.5 * this.canvas.height
            )
            this.context2D.rotate(radians);
            //平移半径
            this.context2D.translate(radius, 0);
            this.fillLocalRectWithTitleUV(
                width, height, u, v, ''
            )
            this.context2D.restore()
        }
    }
    fillLocalRectWithTitleUV(
        // 矩形的宽和高
        width: number,
        height: number,
        // 旋转原点
        u = 0,
        v = 0,
        // 下面的是文本
        text: string,
        color: string = "grey",
        align: TextAlign = "center",
        baseline: TextBaseline = "middle",
        showCoord: boolean = true,
        font: string = this.makeFontString()
    ) {
        if (this.context2D != null) {
            // 计算x,y
            let x = -u * width
            let y = -v * height

            this.context2D.save();

            // 矩形绘制
            this.context2D.fillStyle = color;
            this.context2D.font = font;
            this.context2D.beginPath();
            this.context2D.rect(x, y, width, height)
            this.context2D.fill();

            //文本绘制
            if (text.length > 0) {
                let rectCenterX = 0.5 * width;
                let rectCenterY = 0.5 * height
                this.fillText(
                    text,
                    rectCenterX, rectCenterY,
                    "black",
                    align,
                    baseline
                )
            }
            //移动后的坐标系
            if (showCoord) {
                this.strokeCoord(0, 0, width + 20, height + 20)
                //原点
                this.fillCircle(0, 0, 2)
            }
            this.context2D.restore();
        }
    }

    private _rotationSunSpeed = 50; //太阳自转角速度
    private _rotationSun = 0; //太阳自转的位移

    private _rotationMoonSpeed = 30; //月球自转角速度
    private _rotationMoon = 0; //月球自转的角度

    private _revolutionSpeed = 30 //绕太阳旋转角速度
    private _revolution = 0 //公转 绕太阳的旋转的角度

    update(allMsec: number, intervalSec: number) {
        this._rotationSun += this._rotationSunSpeed * intervalSec

        this._rotationMoon += this._rotationMoonSpeed * intervalSec;

        this._revolution += this._revolutionSpeed * intervalSec

        this._tank._moveTowardTo(intervalSec)
    }
    // 公转     自转      模拟
    rotationAndRevolutionSimulation(
        radius = 200
    ) {
        //角度切换为弧度
        let rotationSum = Math2D.toRadian(this._rotationSun)
        let rotaionMoon = Math2D.toRadian(this._rotationMoon)
        let reolution = Math2D.toRadian(this._revolution)

        if (this.context2D != null) {
            this.context2D.save();

            this.context2D.translate(
                0.5 * this.canvas.width,
                0.5 * this.canvas.height
            )
            //太阳旋转
            this.context2D.save();
            this.context2D.rotate(rotationSum)
            this.fillLocalRectWithTitleUV(
                100, 100,
                0.5, 0.5,
                '自转',
                'gray',
                'left',
                'top'
            )
            this.context2D.restore();
            // 月球
            this.context2D.save();
            this.context2D.rotate(reolution);
            this.context2D.translate(radius, 0)

            this.context2D.rotate(rotaionMoon)
            this.fillLocalRectWithTitleUV(
                80, 80,
                0.5, 0.5,
                "自转+公转"
            )

            this.context2D.restore()
            this.context2D.restore();
        }
    }
    // 绘制坐标系
    drawCanvasCoordCenter() {
        if (this.context2D !== null) {
            //计算中心点
            let centerX = 0.5 * this.canvas.width;
            let centerY = 0.5 * this.canvas.height;

            this.context2D.save();
            this.context2D.lineWidth = 2;
            this.context2D.strokeStyle = "rgba(0,0,255,0.5)"

            // 水平线
            this.strokeLine(0, centerY, this.canvas.width, centerY)
            // 垂直线
            this.strokeLine(centerX, 0, centerX, this.canvas.height)
            this.context2D.restore();
            // 原点
            this.fillCircle(centerX, centerY, 5, "rgba(0,0,0,0.5)")
        }
    }

    drawCoordInfo(
        info: string,
        x: number,
        y: number
    ) {
        this.fillText(info, x, y, "black", "center", "bottom")
    }

    distance(
        x0: number,
        y0: number,
        x1: number,
        y1: number
    ) {
        //
        let diffX = x1 - x0;
        let diffY = y1 - y0;
        // console.log("x",diffX,diffY)
        return Math.sqrt(diffX * diffX + diffY * diffY)
    }

    strokeCircle(
        x: number,
        y: number,
        radius: number,
        color: string = 'red',
        lineWidth: number = 1
    ) {
        if (this.context2D !== null) {
            this.context2D.save();
            this.context2D.strokeStyle = color;
            this.context2D.lineWidth = lineWidth;
            this.context2D.beginPath();

            this.context2D.arc(x, y, radius, 0, Math.PI * 2);

            this.context2D.stroke();
            this.context2D.restore();
        }
    }
}

export {
    TestCh5
}